<template>
  <view class="tabBar-container">
    <view class="tabBar">
      <view
        class="tabBar-item"
        v-for="(tab, index) in tabBar"
        :key="index"
        @tap="tabbarItemClick(tab, index)"
      >
        <view class="tabBar-icon">
          <image
            :src="active == index ? tab.selectedIconPath : tab.iconPath"
            :class="tab.midButton ? 'midButton' : ''"
          ></image>
        </view>
        <text :class="active == index ? 'tabbar-text-active' : ''">{{
          tab.text
        }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { page } from "@/utils/index";
export default {
  props: ["index"],
  data() {
    return {
      tabBar: [
        {
          pagePath: "/pages/index/index",
          iconPath: "/static/icon/icon_home_inactive.png",
          selectedIconPath: "/static/icon/icon_home_active.png",
          text: "首页",
        },
        {
          pagePath: "/pages/message/index",
          iconPath: "/static/icon/icon_msg_inactive.png",
          selectedIconPath: "/static/icon/icon_msg_active.png",
          text: "消息",
        },
        {
          pagePath: "/pages/mine/index",
          iconPath: "/static/icon/icon_mine_inactive.png",
          selectedIconPath: "/static/icon/icon_mine_active.png",
          text: "我的",
        },
      ],
      active: 0,
    };
  },
  computed: {
    path() {
      return page();
    },
  },
  watch: {
    path(val) {
      console.log(val, "valvalval");
    },
  },
  mounted() {
    //隐藏原生tabbar
    this.active = this.index; //加载键值
  },
  methods: {
    tabbarItemClick(tab, index) {
      uni.switchTab({
        url: tab.pagePath,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabBar-container {
  height: 96rpx;
  padding-top: 10rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabBar {
  height: 48px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  z-index: 9999;
  padding-top: 10rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabBar-item {
  width: 100%;
  text-align: center;

  .tabBar-icon {
    width: 100%;
    height: 40rpx;
    position: relative;

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }

  text {
    font-size: 22rpx;
    font-weight: 400;
    color: #666666;
  }

  .tabbar-text-active {
    color: #138e57;
  }
}

.midButton {
  background: #fff;
  position: absolute;
  width: 88rpx !important;
  height: 88rpx !important;
  padding: 4rpx;
  border-radius: 100%;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -80%);
}
</style>
